<template>
  <div class="flashExchange_container pr-1 pl-1">
		<div class="flashExchange_container_card padding-1 br-16">
			<p class="card_title mb-1">{{$t("闪兑")}}</p>
			<p class="card_label mb-0">{{$t("消耗")}}</p>
			<div class="card_input pl-1 pr-1 mb-0">
				<div class="card_input_left" @click="changeCurrency(1)">
					<img class="mr-0 card_input_left_logo" :src="consume.image" alt="">
					<div class="mr-0">{{consume.name}}</div>
					<img src="@/image/aiQuantization/indexTop/arrow.png" alt="">
				</div>
				<div class="card_input_right">
					<input type="number" v-model="consumeMoney" :placeholder="$t('请输入金额')" />
					<span @click="consumeMoney = consumeBalance">{{$t("全部")}}</span>
				</div>
			</div>
			<div class="card_consumeBalance mb-1">
				<span>{{$t("余额")}}：</span>
				<span class="card_consumeBalance_money mr-0 ml-0">{{consumeBalance}}</span>
				<span>{{consume.name}}</span>
			</div>
			<div class="card_next_img">
				<img src="@/image/personalCenter/withdraw.png" alt="">
			</div>
			<p class="card_label mb-0">{{$t("获得")}}</p>
			<div class="card_input pl-1 pr-1 mb-0">
				<div class="card_input_left"  @click="changeCurrency(2)">
					<img class="mr-0 card_input_left_logo" :src="gain.image" alt="">
					<div class="mr-0">{{gain.name}}</div>
					<img src="@/image/aiQuantization/indexTop/arrow.png" alt="">
				</div>
				<div class="card_input_right">
					<div class="card_input_right_sps">{{getGainMoney}}</div>
				</div>
			</div>
			<div class="card_consumeBalance mb-3">
				<span>{{$t("账户")}}：</span>
				<span class="card_consumeBalance_money mr-0 ml-0">{{gainBalance}}</span>
				<span>{{gain.name}}</span>
			</div>

			<div class="card_content mb-0">
				<div class="card_content_item mb-0">
					<span>{{$t("手续费")}}</span>
					<span class="card_content_item_sps">{{serviceCharge+ (feeType == '1' ? '%': ' '+consume.name)}}</span>
				</div>
				<div class="card_content_item">
					<span>{{$t("充币到账")}}</span>
					<span class="card_content_item_sps">{{'1 ' + consume.name + ' ≈ ' + getIntoAccount + '  ' + gain.name}}</span>
				</div>
			</div>
			<p class="card_label mb-3">{{$t("闪兑金额依据平台即时汇率而定，实际到账金额以最终确认数额为准")}}</p>
			<button class="flashExchange_container_btn" @click="flashExchange">{{$t("闪兑")}}</button>
		</div>
		<ComFlashExchangeRadio :visible="visible" :selectType="selectType" :coinsMap="coinsMap" :consume="consume" :gain="gain" @close="modalClose" @criminal="selectCurrency"></ComFlashExchangeRadio>
	</div>
</template>

<script>
import ComFlashExchangeRadio from "@/components/comFlashExchangeRadio"
import { confirmDialog } from '@/utils'
import { getFlashExchange , getFlashExchangeRate , flashExchange } from "@/request/personalCenter"
import BusinessUtils from '@/utils/business'
export default {
	name: 'FlashExchange',
	components:{
		ComFlashExchangeRadio
	},
	data(){
		return{
			id:'',
			consume:{},
			gain:{},
			consumeBalance: 0, // 消耗余额
			gainBalance: 0, // 获得余额
			serviceCharge: 1, // 手续费
			exchangeRate: 1, // 兑换比例
			consumeMoney: '', // 消耗兑换金额,输入
			gainMoney: 0, // 获得兑换金额,计算
			visible: false, // 切换币种控制
			feeType: '1', // 手续费类型，1百分比，2固定值
			coinsMap: {
				'USDT': {id:1, name: 'USDT', image: BusinessUtils.getCoinIcon('USDT'),exchangeMap:{
					'SAT': 1,
					'SUSD': 2,
					'USDC': 3
				}},
				'USDC': {id:2, name: 'USDC', image: BusinessUtils.getCoinIcon('USDC'),exchangeMap:{
					'SAT': true,
					'SUSD': true,
					'USDT': true
				}},
				'SAT': {id:3, name: 'SAT', image: BusinessUtils.getCoinIcon('SAT'),exchangeMap:{
					'USDT': true,
					'USDC': true
				}},
				'SUSD': {id:4, name: 'SUSD', image: BusinessUtils.getCoinIcon('SUSD'),exchangeMap:{
					'USDT': true,
					'USDC': true,
					'SAT': true
				}}
			},
			selectType: 1, // 1.消耗币种，2.获得币种 
		}
	},
	computed:{
		// 计算获得兑换金额
		getGainMoney(){
			let money
			let consumeMoney = this.consumeMoney ? Number(this.consumeMoney) : 0
			if(this.feeType == '1'){
				money = (consumeMoney * this.exchangeRate * (1-this.serviceCharge/100)).toFixed(4)
			}else{
				money = ((consumeMoney - this.serviceCharge) * this.exchangeRate).toFixed(4)
			}
			if(money < 0){
				money = 0
			}
			return money
		},
		// 计算获得比例
		getIntoAccount(){
			return 1 * this.exchangeRate
		}
	},
	mounted(){
		this.init()

		if(this.$route.params.id){
			this.id = this.$route.params.id
		}
		this.getInfo()
	},
	methods:{
		init(){
			this.consume = this.coinsMap['USDT']
			this.gain = this.coinsMap['SUSD']
		},

		getInfo(){
			// 请求余额
			getFlashExchange({}).then(res=>{
				if(res.code == 1){
					this.consumeBalance = Number(res.data[this.consume.name.toLowerCase()]).toFixed(4)
					this.gainBalance = Number(res.data[this.gain.name.toLowerCase()]).toFixed(4)
				}else{
					this.$toast.fail(res.msg)
				}
			})
			// 请求汇率
			getFlashExchangeRate({from_currency:this.consume.name,to_currency:this.gain.name}).then(res=>{
				if(res.code == 1){
					this.serviceCharge = Number(res.data.fee).toFixed(2)
					this.exchangeRate = Number(res.data.rate).toFixed(4)
					this.feeType = res.data.type
				}else{
					this.$toast.fail(res.msg)
				}
			})
		},
		changeCurrency(type){
			// 切换币种
			this.selectType = type
			this.visible = true
		},
		modalClose(){
			// 关闭
			this.visible = false
		},
		selectCurrency(val){
			if(val.consume.name != this.consume.name || val.gain.name != this.gain.name){
				this.consume = val.consume
				this.gain = val.gain
				
				this.getInfo()
			}
			this.modalClose()
		},
		async flashExchange(){
			if(!this.consumeMoney){
				this.$toast.fail(this.$t('请输入消耗金额'))
				return
			}

			if(Number(this.getGainMoney) <= 0){
				this.$toast.fail(this.$t('The received amount cannot be equal to 0'))
				return
			}

			if(Number(this.consumeMoney) > Number(this.consumeBalance)){
				this.$toast.fail(this.$t('The consumed amount cannot be greater than the balance'))
				return
			}

			const result = await confirmDialog({
				title: this.$t('请输入支付密码'),
				confirmText: this.$t('确认'),
				cancelText: this.$t('取消'),
			})
			if (result) {
				let obj = {
					from_currency: this.consume.name,
					to_currency: this.gain.name,
					num: this.consumeMoney,
					paypassword:result
				}
				flashExchange(obj).then(res=>{
					if(res.code == 1){
						this.$toast.success('闪兑成功')
						this.getInfo()
					}else{
						this.$toast.fail(res.msg)
					}
				})
			}else{

			}
		}
	}
}
</script>

<style>

</style>